<template>
	<view class="address-content">
		<view class="address-item">
			<view class='address-item-icon' @click="itemClick">
				<image mode="aspectFill" src="/static/images/address.png"></image>
			</view>
			<view class='address-item-content' @click="itemClick">
				<view class="item-content">{{addressInfo.full_name}}</view>
				<view class="item-content">{{addressInfo.mobile}}</view>
				<view class="item-content">{{addressInfo.condominium_name}}</view>
				<view class="item-content">Blk {{addressInfo.block}}, #{{addressInfo.floor}}-{{addressInfo.unit}}</view>
			</view>
			<view class="edit-btn" :style="[{ color: editColor }]">
				<image v-if="showEdit" mode="aspectFit" src="/static/images/edit-button.png" @click="editClick"></image>
				<image v-if="showDel" mode="aspectFit" src="/static/images/delete.png" @click="delClick"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			addressInfo: {
				type: Object,
				default: {}
			},
			editColor: {
				type: String,
				default: '#2962FF'
			},
			showEdit: {
				type: Boolean,
				default: true
			},
			showDel: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			editClick(){
				this.$emit('eventClick', this.addressInfo);
			},
			itemClick() {
				this.$emit('itemClick');
			},
			delClick() {
				let data = {
					id: this.addressInfo.id
				}
				let _this = this
				this.$common.modelShow('Tips', 'Are you sure you want to delete', ()=> {
					_this.$api.addressDel(data, res=> {
						if(res.code === 1) {
							_this.$common.successToShow('Successfully Deleted', ress => {
								_this.$emit('onSuccess');
							})
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.address-content {
	.address-item {
		position: relative;
		padding: 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		z-index: 99;
		.address-item-icon {
			flex: 1;
		
			image {
				// width: .8rem;
				// height: 1rem;
                top: calc((42rpx + 32px - 2rem));
                // width: .8rem;
                // height: 1rem;
				margin: 20rpx 20rpx 0 0;
                width: 3rem;
                height: 3rem;
				position: relative;
				top:0;
				left: 0;
			}
		}
		.address-item-content {
			flex: 8;
			display: flex;
			flex-direction: column;
			.item-content {
				font-family: Roboto;
				font-size: $font-base;
				letter-spacing: 1rpx;
				color: #252527;
				line-height: 42rpx;
			}
		}
		.edit-btn {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				z-index: 100;
			}
		}
	}
}
</style>
